<template>
  <div class="bg">
    <!-- <h1>档级管理</h1> -->
    <div class="searchbox">
      <!-- 新增按钮 -->
      <el-button type="primary" color="#0052CC" @click="addon">新增</el-button>
    </div>
    <!-- 表格区域 -->
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        border
        default-expand-all
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        v-loading="loading"
      >
        <el-table-column prop="id" label="序号" width="80" />
        <el-table-column prop="title" label="档级名称" />
        <el-table-column prop="money" label="岗位薪资" />
        <el-table-column prop="safe" label="安全质量奖" />
        <el-table-column prop="station" label="岗位津贴" />
        <el-table-column prop="between" label="薪资区间" />
        <el-table-column prop="performance" label="绩效薪资" />
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" @click="editbox(scope.row.id)"
              >编辑</el-button
            >
            <el-button type="danger" @click="delshow(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增弹窗 -->
    <el-dialog v-model="addshow" title="添加档级" width="30%">
      <el-form
        :model="addform"
        label-position="right"
        label-width="120"
        ref="addrule"
        :rules="ruleadd"
      >
        <el-form-item label="选择上级" prop="pid">
          <el-select v-model="addform.pid" placeholder="请选择" class="addinp">
            <el-option
              v-for="item of opt"
              :label="item.title"
              :value="item.id"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="档级名称" prop="title">
          <el-input
            v-model="addform.title"
            autocomplete="off"
            placeholder="请输入档级名称"
          />
        </el-form-item>
        <el-form-item label="岗位薪资" prop="money">
          <el-input
            v-model="addform.money"
            autocomplete="off"
            placeholder="请输入岗位薪资"
            type="number"
          />
        </el-form-item>
        <el-form-item label="安全质量奖" prop="safe">
          <el-input
            v-model="addform.safe"
            autocomplete="off"
            placeholder="请输入安全质量奖"
            type="number"
          />
        </el-form-item>

        <el-form-item label="岗位津贴" prop="station">
          <el-input
            v-model="addform.station"
            autocomplete="off"
            placeholder="请输入岗位津贴"
            type="number"
          />
        </el-form-item>
        <el-form-item label="档级薪资区间" prop="between">
          <el-input
            v-model="addform.between"
            autocomplete="off"
            placeholder="请输入档级薪资区间"
          /> </el-form-item
        ><el-form-item label="绩效薪资" prop="performance">
          <el-input
            v-model="addform.performance"
            autocomplete="off"
            placeholder="请输入绩效薪资"
            type="number"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addshow = false">取消</el-button>
          <el-button type="primary" @click="addsure"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog v-model="editshow" title="添加档级" width="30%">
      <el-form
        :model="editform"
        label-position="right"
        label-width="120"
        ref="editrule"
        :rules="ruledit"
      >
        <el-form-item label="选择上级">
          <el-input
            v-model="editform.pids"
            autocomplete="off"
            placeholder="上级id"
            disabled
          />
        </el-form-item>
        <el-form-item label="档级名称" prop="title">
          <el-input
            v-model="editform.title"
            autocomplete="off"
            placeholder="请输入档级名称"
          />
        </el-form-item>
        <el-form-item label="岗位薪资" prop="money">
          <el-input
            v-model="editform.money"
            autocomplete="off"
            placeholder="请输入岗位薪资"
            type="number"
          />
        </el-form-item>
        <el-form-item label="安全质量奖" prop="safe">
          <el-input
            v-model="editform.safe"
            autocomplete="off"
            placeholder="请输入安全质量奖"
            type="number"
          />
        </el-form-item>

        <el-form-item label="岗位津贴" prop="station">
          <el-input
            v-model="editform.station"
            autocomplete="off"
            placeholder="请输入岗位津贴"
            type="number"
          />
        </el-form-item>
        <el-form-item label="档级薪资区间" prop="between">
          <el-input
            v-model="editform.between"
            autocomplete="off"
            placeholder="请输入档级薪资区间"
          /> </el-form-item
        ><el-form-item label="绩效薪资" prop="performance">
          <el-input
            v-model="editform.performance"
            autocomplete="off"
            placeholder="请输入绩效薪资"
            type="number"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addshow = false">取消</el-button>
          <el-button type="primary" @click="editsure"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 恢复确认弹窗 -->
    <el-dialog v-model="deshow" title="档级删除" width="20%" align-center>
      <span style="display: flex"
        ><img class="jinggao" src="../../assets/img/jianggao.png" />确定要删除当前档级吗(请谨慎操作)</span
      >
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deshow = false">取消</el-button>
          <el-button type="primary" @click="delsure"> 删除 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { itemList, addItem, editItem, delItem } from "@/api/gride";
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { ElNotification } from "element-plus";

function GetTreeData(data) {
  let TreeData = [];
  let map = new Map(); //存在id,对应所在的内存地址
  // console.log(map);
  let outputObj, pid;
  for (let i = 0; i < data.length; i++) {
    pid = data[i].pid;
    if (map.has(pid)) {
      //存在，将些信息，加入到对应id=pid的对象上的children
      if (!map.get(pid).children) map.get(pid).children = [];
      let obj = new Object(data[i]);
      map.get(pid).children.push(obj);
      map.set(data[i].id, obj);
      // console.log(map);
    } else if (!map.has(pid) && pid == 0) {
      //这里处理pid不存在，且pid 为0的处理，pid不存在，且不为0的，程序不考虑这种情况
      outputObj = new Object(data[i]);
      TreeData.push(outputObj);
      map.set(data[i].id, outputObj);
      // console.log(map);
    }
  }
  return TreeData;
  console.log(map);
}
// 菜单列表请求
const tableData = ref();
renders();
function renders() {
  new Promise((resolve, reject) => {
    itemList()
      .then(data => {
        console.log(JSON.parse(data));
        tableData.value = GetTreeData(JSON.parse(data).list);
        console.log(tableData.value);
        // tableData.value = typechild(tableData.value);
        girdeNum(tableData.value);
      })
      .catch(error => {
        reject(error);
      });
  });
}
const loading = ref(false);
const opt = ref([]);
function girdeNum(data) {
  for (let item of data) {
    opt.value.push({ id: item.id, title: item.title });
  }
}
// -------------------------------添加-----------------------------------
const addshow = ref(false);
let addon = () => {
  addshow.value = true;
};
let addform = reactive({
  pid: "",
  title: "",
  money: 0,
  safe: "",
  station: "",
  between: "",
  performance: ""
});
// 添加验证规则
const addrule = ref(null);
const ruleadd = ref({
  pid: [{ required: true, message: "请选择上级菜单", trigger: "change" }],
  title: [{ required: true, message: "请输入档级标题", trigger: "blur" }],
  money: [{ required: true, message: "请输入岗位薪资", trigger: "blur" }],
  safe: [{ required: true, message: "请输入安全质量奖", trigger: "blur" }],
  station: [{ required: true, message: "请输入岗位津贴", trigger: "blur" }],
  between: [{ required: true, message: "请输入档级薪资区间", trigger: "blur" }],
  performance: [{ required: true, message: "请输入绩效薪资", trigger: "blur" }]
});
// 确认添加
let addsure = () => {
  // addshow.value = false;
  addrule.value.validate(valid => {
    console.log(valid);
    // 不通过校验
    if (!valid) return ElMessage.error("请将内容填写完成后 再进行添加操作!");

    console.log(addform);
    new Promise((resolve, reject) => {
      addItem(addform)
        .then(res => {
          console.log(JSON.parse(res));
          if (JSON.parse(res).code == 1) {
            renders();
            ElNotification({
              title: "Success",
              message: "添加成功",
              type: "success"
            });
            addshow.value = false;
            loading.value = true;
            setTimeout(() => {
              loading.value = false;
            }, 800);
          } else {
            ElNotification({
              title: "Error",
              message: "操作失败",
              type: "error"
            });
          }
        })
        .catch(error => {
          reject(error);
        });
    });
  });
};
// -----------------------------编辑----------------------------------
// 添加验证规则
const editrule = ref(null);
const ruledit = ref({
  title: [{ required: true, message: "请输入档级标题", trigger: "blur" }],
  money: [{ required: true, message: "请输入岗位薪资", trigger: "blur" }],
  safe: [{ required: true, message: "请输入安全质量奖", trigger: "blur" }],
  station: [{ required: true, message: "请输入岗位津贴", trigger: "blur" }],
  between: [{ required: true, message: "请输入档级薪资区间", trigger: "blur" }],
  performance: [{ required: true, message: "请输入绩效薪资", trigger: "blur" }]
});
let editform = <any>reactive({
  id: "",
  pid: "",
  pids: "",
  title: "",
  money: 0,
  safe: "",
  station: "",
  between: "",
  performance: ""
});
const editshow = ref(false);
const editid = ref();
let editbox = ed => {
  editid.value = ed;
  editshow.value = true;
  editform.id = ed;
  console.log(editid.value);
  topid(tableData.value);
};
const tid = ref();
const tname = ref();
function topid(data) {
  for (let item of data) {
    if (item.children) {
      if (editid.value == item.id) {
        editform.pids = "顶级";
        editform.pid = 0;
        editform.title = item.title;
        editform.money = item.money;
        editform.safe = item.safe;
        editform.station = item.station;
        editform.between = item.between;
        editform.performance = item.performance;
      }
      topid(item.children);
    } else {
      if (editid.value == item.id) {
        for (let ins of tableData.value) {
          if (ins.children) {
            tid.value = ins.id;
            tname.value = ins.title;
            for (let top of ins.children) {
              if (top.id == editid.value) {
                editform.pids = tname.value;
                editform.pid = tid.value;
                editform.title = item.title;
                editform.money = item.money;
                editform.safe = item.safe;
                editform.station = item.station;
                editform.between = item.between;
                editform.performance = item.performance;
              }
            }
          }
        }
      }
    }
  }
  console.log(editform);
}
let editsure = () => {
  editrule.value.validate(valid => {
    console.log(valid);
    // 不通过校验
    if (!valid) return ElMessage.error("请将内容填写完成后 再进行添加操作!");
    new Promise((resolve, reject) => {
      editItem(editform)
        .then(res => {
          console.log(JSON.parse(res));
          if (JSON.parse(res).code == 1) {
            renders();
            ElNotification({
              title: "Success",
              message: "操作成功",
              type: "success"
            });
            editshow.value = false;
            loading.value = true;
            setTimeout(() => {
              loading.value = false;
            }, 800);
          } else {
            ElNotification({
              title: "Error",
              message: "操作失败",
              type: "error"
            });
          }
        })
        .catch(error => {
          reject(error);
        });
    });
  });
};
// ---------------------------删除项目----------------------------
const delid = ref();
const deshow = ref(false);
let delshow = deid => {
  delid.value = deid;
  if (deid == 1 || deid == 5 || deid == 9 || deid == 13) {
      ElNotification({
        title: "Error",
        message: "禁止删除",
        type: "error"
      });
      return
    } else {
      deshow.value = true;
    }
};
let delsure = () => {
  new Promise((resolve, reject) => {
      delItem({id:delid.value})
        .then(res => {
          console.log(JSON.parse(res));
          if (JSON.parse(res).code == 1) {
            renders();
            ElNotification({
              title: "Success",
              message: "操作成功",
              type: "success"
            });
            deshow.value = false;
            loading.value = true;
            setTimeout(() => {
              loading.value = false;
            }, 800);
          } else {
            ElNotification({
              title: "Error",
              message: "操作失败",
              type: "error"
            });
          }
        })
        .catch(error => {
          reject(error);
        });
    });
};
</script>

<style lang="scss" scoped>
h1 {
  font-weight: 400;
}
.bg {
  width: 98%;
}
.searchbox {
  width: auto;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: left;
}
.addinp {
  width: 101%;
}
.jinggao {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
</style>
